<template>
  <div class="login-page">
    <div class="login-main">
      <div class="login-left"> </div>
      <div class="login-right">
        <div class="login-card">
          <div class="login-title">
            <img src="@/assets/img/logo.png">
            <div class="title text-bs">智慧教室资源管理平台</div>
          </div>
          <el-form class="form-card" ref="ruleFormRef" label-position="top"  :rules="formRules" :model="formData" size="large">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="formData.userName" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" type="password" placeholder="请输入登录密码" show-password clearable />
            </el-form-item>
            <el-form-item label="验证码" prop="captcha">
              <el-input v-model="formData.captcha"  placeholder="请输入验证码" :maxlength="4" clearable>
                <template #append >
                  <!--<captcha-image ref="captchaImage" super-code="skip"></captcha-image>-->
                  <div style="width: 100%;height: 36px;" @click="getViewCode">
                    <img v-if="formData.captchaId" height="36" :src="`/api/captcha/${formData.captchaId}.png`" alt="" >
                  </div>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <el-row :gutter="30">
            <el-col :span="24" class="t-c">
              <el-button size="large" class="com-btn login-btn" :loading="loadingState.submit" @click="onSubmit">登录</el-button>
            </el-col>
            <!-- <el-col :span="12" class="t-c">
              <el-button size="large" class="com-btn scan-btn" @click="onSubmit">扫描登录</el-button>
            </el-col> -->
          </el-row>
          <!-- <div class="register-cont">
            <a>立即注册</a>
            <span class="btn-line">|</span>
            <a>忘记密码</a>
          </div> -->
        </div>
        <!-- <div class="mt-5 t-c">
          <img src="@/assets/img/login/wechat.svg" class="mr-3">
          <img src="@/assets/img/login/dingding.svg" class="ml-3">
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 登录视图组件
 * @version 1.0.0
 */
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { RegRule, EsValidate } from '@/utils/EsValidate';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';
import useUserStore from "@/stores/useUserStore";
import adminRoutes from "@/router/admin";
import userRoutes from "@/router/user";
console.log('[INFO] 创建登陆视图组件')

// ======================================================
//                      变量声明
// ======================================================
const userStore = useUserStore()
const authStore = useAuthStore();
const router = useRouter();
const ruleFormRef = ref(null);
const formData = ref({
  password: "",
  userName: "",
  captcha: "",
  captchaId: ""
});
const loadingState = ref({ submit: false })
const formRules = {
  userName: [
    { required: true, message: '用户名必填' },
    { pattern: RegRule.username, message: '用户名不规范' },
  ],
  password: [
    { required: true, message: '密码必填' },
    { pattern: RegRule.username, message: '密码不规范' },
  ],
  captcha: [
    { required: true, message: '验证码必填' },
    { pattern: RegRule.captcha, message: '验证码不规范' },
  ],
};


onMounted(() => {
  getViewCode()
})

const getViewCode = () => {
  //获取验证码
  EsAjax.post(ApiUrls.getCaptcha, {}).then((res) => {
    console.log(res)
    formData.value.captchaId = res.data.data
  })
}

// ======================================================
//                      点击操作
// ======================================================

// 点击提交表单按钮
const onSubmit = function () {
  // 表单校验
  // EsValidate(formData.value, formRules).then(() => {
  // if (!captchaImage.value.check(formData.value.captcha)) {
  //   ElMessage.warning("验证码无效");
  //   captchaImage.value.refresh();
  //   formData.value.captcha = "";
  //   return;
  // }
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      EsAjax.post(ApiUrls.login, formData.value).then(res => {
        if (res.data.code === 200) {
          authStore.setToken('login');
          userStore.set(res.data.data)
          router.push('/home');
        } else {
          getViewCode()
          ElMessage.error(res.data.msg || '服务器错误');
        }
      }).catch(err => {
        console.log(err)
        ElMessage.error('网络错误：' + err.message);
      })
    }
  })

  // }).catch(errors => {
  //   console.log(errors)
  //   // ElMessage({
  //   //   type: 'warning',
  //   //   dangerouslyUseHTMLString: true,
  //   //   message: errors.map(obj => obj.message).join("<br />"),
  //   // })
  // });
}


</script>

<style lang="less" scoped>
.login-page {
  overflow: hidden;
  position: relative;
  background-image: url("@/assets/img/login/login-bg.png");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  color: #ffffff;
  min-height: 100vh;
}

.login-main {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 180px;
  width: 100%;
}

@media (max-width: 768px) {
  .login-left {
    display: none;
  }
}
@media (max-width: 1269px) {
  .login-left {
    max-width: 352px;
  }
}
.login-left {
  width: 600px;
}
.login-right {
  width: 460px;
}

.login-title {
  img {
    width: 200px;
  }
  .title {
    font-size: 2rem;
    text-align: left;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
.login-card {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  align-self: center;
  box-shadow: 0 2px 4px #0000000d;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 30px;
  box-sizing: border-box;
  a:active,
  a:link,
  a.hover,
  a:focus {
    color: @base-color;
  }
  a {
    color: @white-text;
  }
  .btn-line {
    color: @white-text;
    padding: 0 10px;
  }
}
.form-card {
  padding: 40px 0 40px 0;
}
:deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.32);
}
:deep(.el-input__wrapper) {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32) !important;
  padding: 1px 0;
}
:deep(.el-form-item.is-error .el-input__wrapper) {
  background: transparent !important;
  border-radius: 0;
  border-bottom: 1px solid  var(--el-color-danger) !important;
  padding: 1px 0;
  box-shadow: none !important;
}
:deep(.el-form-item.is-error .el-input__wrapper.is-foucs){
  box-shadow: none !important;
}
:deep(.el-input__inner) {
  color: #fff;
  font-size: 16px;
}
:deep(.el-input-group__append) {
  width: 150px;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  padding: 0;
}
input:focus,
.textinput input:focus:not(:focus-visible) {
  outline: 0;
}
.register-cont {
  margin: 60px auto 50px auto;
  text-align: center;
}
.com-btn {
  border-radius: 12px;
  width: 150px;
  border: none;
  padding: 30px 19px;
  font-size: 18px;
  font-weight: 400;
}
.scan-btn {
  background: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.5);
}
.login-btn {
  background: #00a2cc;
  color: #fff;
  margin-bottom: 30px;
  width: 100%;
}
</style>
